<script setup lang="ts" name="ChangePassword">
import API from "@/api";
import userinfo from "@/store/userinfo";

const { t } = useI18n();
const global: any = getCurrentInstance()?.appContext.config.globalProperties;
const piniaUserinfo: any = userinfo();
const data: any = reactive({
  changePwdForm:{
    passwd:"",
    newPasswd:"",
    confirmPasswd:""
  },
  changePwdRef:null,
  showOldPwd:false,
  showNowPwd:false,
  showNewPwd:false
});

const {
  changePwdForm, changePwdRef,showOldPwd,showNowPwd,showNewPwd

} = toRefs(data);
const newPwdValidator = (val: string) => {
  if (
    !/^(?!.*\s)[A-Za-z0-9!?@#$%^&*()_+=\-.,:;<>/\\[\]{}|~]{8,16}$/.test(val)
  ) {
    return t('password.test8');
  }
  return true;
};
const comfirmPassValidator = (val: string) => {
  if (!val) {
    return t('password.test9');
  } else if (val !== changePwdForm.value.newPasswd) {
    return t('password.test10');
  } else {
    return true;
  }
}
// 修改密码
const handleChangePwdSubmit = () => {
  if (!changePwdRef.value) return;
  console.log("changePwdRef.value", changePwdRef.value);
  changePwdRef.value?.validate().then(() => {
    let formData = changePwdRef.value?.getValues();
    console.log("handleChangePwdSubmit", formData);
    API.changePasswordAPI(formData).then((res:any) => {
      if (res?.code === 200) {
        global.message(t('password.test11'));
        piniaUserinfo.logout();
      }
    });
  });
};

const togglePasswordVisibility = (data:string) => {
  switch (+data) {
    case 1:
    showOldPwd.value = !showOldPwd.value
    break
    case 2:
    showNowPwd.value = !showNowPwd.value
    break
    case 3:
    showNewPwd.value = !showNewPwd.value
    break
    default:
    showOldPwd.value = !showOldPwd.value
  }
}
</script>

<template>
  <DetailHeader :isNeedBackIcon="true" :title="t('password.test1')"/>
  <div class="changePwdPage">
    <div class="needWord">{{ t('password.test2') }}</div>
    <div class="formContent">
          <van-form ref="changePwdRef">
            <van-field
            :type="showOldPwd ? 'text' : 'password'"
              :right-icon="showOldPwd ? 'eye' : 'closed-eye'"
              @click-right-icon="togglePasswordVisibility('1')"
              v-model="changePwdForm.passwd"
              name="passwd"
              :placeholder="t('password.test3')"
              :rules="[{ required: true, message: t('password.test4') }]"
            />
            <van-field
              v-model="changePwdForm.newPasswd"
              name="newPasswd"
              :placeholder="t('password.test5')"
              :type="showNowPwd ? 'text' : 'password'"
              :right-icon="showNowPwd ? 'eye' : 'closed-eye'"
              @click-right-icon="togglePasswordVisibility('2')"
              :rules="[{ validator: newPwdValidator }]"
            />
            <van-field
              v-model="changePwdForm.confirmPasswd"
              :type="showNewPwd ? 'text' : 'password'"
              :right-icon="showNewPwd ? 'eye' : 'closed-eye'"
              @click-right-icon="togglePasswordVisibility('3')"
              name="confirmPasswd"
              :placeholder="t('password.test6')"
              :rules="[{ validator: comfirmPassValidator }]"
            />
            <van-button class="confirmBtn" round block type="primary" @click="handleChangePwdSubmit">
              {{ t('password.test7') }}
          </van-button>
          </van-form>
        </div>
  </div>

</template>

<style lang="scss" scoped>
@import url("./index.scss");
</style>
